<template>
  <div class="common-layout">
    <el-container>

      <el-header id="header">
        <el-affix position="top" :offset="0">
          <div class="header-content">
            <article-information-heade />
          </div>
        </el-affix>
      </el-header>

      <el-container>
        <el-aside width="350px" style="height: 800px;margin-top: 100px;">
          <div class="fixed-aside">
            <article-author-inform ref="authorInformRef" />
          </div>
        </el-aside>
        <el-container>
          <el-main style=" padding: 0;">
            <!-- 使用独立组件展示文章详情 -->
            <article-detail-content :article="article" style="max-width: 1100px;"/>
            <!-- 评论区 -->
            <comment-section style="max-width: 1100px;"/>
          </el-main>
        </el-container>
      </el-container>
    </el-container>
  </div>


  <div class="action-buttons">
    <!-- 喜欢按钮 -->
    <el-button v-if="articleRelationshipWithUser !== 0" circle :class="{
      'el-button--like': articleRelationshipWithUser === 1 || articleRelationshipWithUser === 4,
    }" title="喜欢" @click="toggleLike" style="margin-left: 10px;">
      <el-icon>
        <el-icon>
          <ArrowUp />
        </el-icon>
      </el-icon>
    </el-button>

    <!-- 不喜欢按钮 -->
    <el-button v-if="articleRelationshipWithUser !== 0" circle :class="{
      'el-button--dislike': articleRelationshipWithUser === 2,
    }" title="不喜欢" @click="toggleDislike">
      <el-icon>
        <ArrowDown />
      </el-icon>
    </el-button>

    <!-- 收藏按钮 :type="articleRelationshipWithUser === 3 || articleRelationshipWithUser === 4 ? 'warning' : 'info'" -->
    <el-button v-if="articleRelationshipWithUser !== 0" circle :class="{
      'el-button--collection': articleRelationshipWithUser === 3 || articleRelationshipWithUser === 4,
    }" title="收藏" @click="toggleFavorite">
      <el-icon>
        <Star />
      </el-icon>
    </el-button>

    <!-- 为作者提供修改删除按钮 -->
    <!-- 修改 -->
    <el-button circle type="info" title="修改" style="margin-left: 10px;" v-if="articleRelationshipWithUser === 0"
      @click="updateArticle(article)">
      <el-icon>
        <el-icon>
          <EditPen />
        </el-icon>
      </el-icon>
    </el-button>
    <!-- 删除 -->
    <el-button circle type="info" title="删除" style="margin-left: 10px;" v-if="articleRelationshipWithUser === 0"
      @click="deleteArticle(articleId)">
      <el-icon>
        <el-icon>
          <Delete />
        </el-icon>
      </el-icon>
    </el-button>

    <!-- 评论和分享按钮始终可见 -->
    <el-button circle type="info" title="评论" style="margin-left: 10px;">
      <el-icon>
        <ChatDotRound />
      </el-icon>
    </el-button>

    <el-button circle type="info" title="分享">
      <el-icon>
        <Share />
      </el-icon>
    </el-button>
  </div>



  <!-- 回到顶部按钮 -->
  <el-button v-if="showBackToTop" class="back-to-top" type="primary" circle @click="scrollToTop">
    <el-icon>
      <ArrowUp />
    </el-icon>
  </el-button>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import ArticleAuthorInform from '@/components/ArticleAuthorInform.vue'
import ArticleInformationHeade from '@/components/ArticleInformationHeade.vue'
import ArticleDetailContent from '@/components/ArticleDetailContent.vue' // 新增引入
import { getArticleByArticleId } from '@/api/articlesApi'
import { getUserArticleRelationship, updateUserArticleRelationship } from '../api/userArticleApi.js'
import { deleteArticleByArticleId } from '@/api/articlesApi'
import CommentSection from '@/components/CommentSection.vue'
const route = useRoute()
const articleId = route.params.id
const article = ref({
  title: '',
  author: '',
  createTime: '',
  content: ''
})

// 文章作者关系
//0是我的文章，1喜欢2不喜欢3收藏4收藏+喜欢
const articleRelationshipWithUser = ref(0)

const getRelationship = async (articleId) => {
  articleRelationshipWithUser.value = await getUserArticleRelationship(articleId)
  console.log(articleRelationshipWithUser.value);
}
getRelationship(articleId)

// 获取文章详情数据
const fetchArticle = async () => {

  const req = await getArticleByArticleId(articleId)
  //  console.log(req.content);
  article.value.author = req.user.username,
    article.value.title = req.title,
    article.value.createTime = req.createTime,
    article.value.content = req.content

}

onMounted(() => {
  fetchArticle()
})

const showBackToTop = ref(false);

// 滚动监听
const handleScroll = () => {
  const scrollTop =
    window.scrollY ||
    document.documentElement.scrollTop ||
    document.body.scrollTop;
  showBackToTop.value = scrollTop > 300; // 滚动超过300px显示按钮
};

// 回到顶部方法
const scrollToTop = () => {
  window.scrollTo({
    top: 0,
    behavior: 'smooth' // 平滑滚动效果
  });
};

onMounted(() => {
  window.addEventListener('scroll', handleScroll);
  // window.removeEventListener('scroll', handleScroll);
});

const updateRelationshio = function (relationship) {
  articleRelationshipWithUser.value = relationship;
  updateUserArticleRelationship(articleId, relationship)
}

const toggleLike = () => {
  if (articleRelationshipWithUser.value === 1) {
    // 取消喜欢
    updateRelationshio(5)
  } else if (articleRelationshipWithUser.value === 2) {
    // 不喜欢替换为喜欢
    updateRelationshio(1)
  } else if (articleRelationshipWithUser.value === 3) {
    // 收藏后加入喜欢
    updateRelationshio(4)
  } else if (articleRelationshipWithUser.value === 4) {
    // 收藏喜欢取消喜欢
    updateRelationshio(3)
  }
  else if (articleRelationshipWithUser.value === 5) {
    // 收藏喜欢取消喜欢
    updateRelationshio(1)
  } else {
    // 设置为喜欢
    updateRelationshio(1)
  }
  console.log(articleRelationshipWithUser.value);
  handleUpdateAuthorInfo()

};

const toggleDislike = () => {
  if (articleRelationshipWithUser.value === 2) {
    //  取消不喜欢
    updateRelationshio(5)
  } else {
    // 设置不喜欢
    updateRelationshio(2)
  }
  console.log(articleRelationshipWithUser.value);
  handleUpdateAuthorInfo()

};

const toggleFavorite = () => {
  if (articleRelationshipWithUser.value === 1) {
    // 加入收藏并保持喜欢
    updateRelationshio(4)
  }
  else if (articleRelationshipWithUser.value === 2) {
    // 取消不喜欢加入收藏
    updateRelationshio(3)
  } else if (articleRelationshipWithUser.value === 3) {
    // 取消收藏
    updateRelationshio(5)
  } else if (articleRelationshipWithUser.value === 4) {
    // 取消收藏但保留喜欢
    updateRelationshio(1)
  } else {
    updateRelationshio(3)// 设置为收藏
  }
  console.log(articleRelationshipWithUser.value);
  handleUpdateAuthorInfo()
};

const deleteArticle = (articleId) => {
  deleteArticleByArticleId(articleId).then(() => {
    window.location.href = '/'
  })
}

const updateArticle = (article) => {
  window.location.href = '/editArticle/' + articleId
}

const authorInformRef = ref()

const handleUpdateAuthorInfo = () => {
  // 调用子组件暴露的方法
  if (authorInformRef.value) {
    authorInformRef.value.refresh()
  }
}

</script>

<style scoped>
#header {
  height: 100px;
  margin-top: 10px;
}

.back-to-top {
  position: fixed;
  bottom: 30px;
  right: 105px;
  z-index: 9999;
  background-color: rgb(115.2, 117.6, 122.4);
  border-color: rgb(115.2, 117.6, 122.4);
}

.action-buttons {
  position: fixed;
  right: 100px;
  bottom: 100px;
  /* 距离底部比回到顶部按钮高一点 */
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 9998;
}

.action-buttons .el-button {
  width: 50px;
  height: 50px;
  padding: 10px;
  background-color: #FFA500;
  /* 橙色主色调 */
  border-color: #FFA500;
  color: white;
  /* 图标颜色 */
  transition: all 0.3s ease-in-out;
  box-shadow: 0 4px 6px rgba(255, 165, 0, 0.2);
  /* 添加轻微阴影提升立体感 */
}

.action-buttons .el-button:hover {
  background-color: #FFC107;
  /* 更浅的橙黄色 */
  border-color: #FFC107;
  transform: scale(1.1);
  /* 稍微放大增加交互感 */
  box-shadow: 0 6px 12px rgba(255, 165, 0, 0.3);
}

.action-buttons .el-button:active {
  transform: scale(0.95);
  box-shadow: 0 2px 4px rgba(255, 165, 0, 0.2);
}

.action-buttons .el-icon {
  color: white;
}

/* 修改你喜欢的按钮样式 */
.action-buttons .el-button--like {
  background-color: #F56C6C !important;
  /* 红色 - 喜欢 */
  border-color: #F56C6C !important;
}

.action-buttons .el-button--dislike {
  background-color: #9f9898 !important;
  /* 灰色 - 不喜欢 */
  border-color: #9f9898 !important;
}

.action-buttons .el-button--collection {
  background-color: #5a40f1 !important;
  /* 黄色 - 收藏 */
  border-color: #5a40f1 !important;
}
</style>
